<template>
  <div>
    <a-button type="primary" @click="createInfo" style="margin-bottom: 15px"> 添加学员 </a-button>
    <s-table :columns="columns" :data="loadData" class="user_management_table" ref="table" :pagination="pagination">
      <span slot="cover_image" slot-scope="text, record">
        <img :src="record.cover_image" alt="" style="width: 50px; height: 50px; border-radius: 4px" />
      </span>
      <span slot="details" slot-scope="text, record" style="display: flex">
        <div v-html="record.details" style="width:300px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"></div>
        <span v-if="record.isPic" style="margin-left: 10px"><a-icon type="picture" /></span>
        <span v-if="record.isVideo" style="margin-left: 10px"><a-icon type="play-square" /></span>
      </span>
      <span slot="status" slot-scope="text, record">
        <a-switch :checked="record.is_enable == 1 ? true : false" @change="statusOnChange(record)" />
      </span>
      <span slot="action" slot-scope="text, record">
        <a style="padding-right: 5px; border-right: 1px solid #e8e8e8" @click="handerEdit(record.id)">编辑</a>
        <a style="margin-left: 5px" @click="deleteItem(record.id)">删除</a>
      </span>
    </s-table>
  </div>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { websiteList, editEnable, deleteList } from '@/api/websiteCreate'
export default {
  components: { STable },
  data() {
    return {
      pagination: {
        showTotal: (total) => `共${total}条数据`,
      },
      columns: [
        {
          title: '学员姓名',
          dataIndex: 'name',
          width: 200,
          // scopedSlots: { customRender: 'name' }
        },
        {
          title: '学员照片',
          // dataIndex: 'student_name',
          width: 200,
          scopedSlots: { customRender: 'cover_image' },
        },
        {
          title: '学员简介',
          ellipsis: true,
          dataIndex: 'intro',
          width: 300,
          // scopedSlots: { customRender: 'name' }
        },
        {
          title: '学员详情',
          width: 400,
          // dataIndex: 'student_name',
          scopedSlots: { customRender: 'details' },
        },
        {
          title: '启用状态',
          scopedSlots: { customRender: 'status' },
          width: 200,
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          width: 200,
        },
      ],
      queryParam: {
        school_id: this.$store.state.user.school,
        type: 3,
      },
      loadData: (parameter) => {
        return websiteList(Object.assign(parameter, this.queryParam)).then((res) => {
          res.data.forEach((item) => {
            item.isPic = false
            item.isVideo = false
            if (item.details) {
              if (item.details.indexOf('<img') != -1) {
                item.isPic = true
              } else {
                item.isPic = false
              }
              if (item.details.indexOf('<iframe') != -1) {
                item.isVideo = true
              } else {
                item.isVideo = false
              }
              item.details = item.details.replace(/<img/g, '<img style="display:none"')
              item.details = item.details.replace(/<iframe/g, '<iframe style="display:none"')
              item.details = item.details.replace(
                /<p/g,
                '<p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"'
              )
              if(item.details.match(
                /<p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">(\S*)<\/p>/
              )!=null){
                item.details = item.details.match(
                /<p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">(\S*)<\/p>/
              )[1]
              }
              // item.details = item.details.match(
              //   /<p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">(\S*)<\/p>/
              // )[1]
            }
          })
          return res
        })
      },
    }
  },
  methods: {
    statusOnChange(data) {
      let isStatus = 1
      if (data.is_enable == 1) {
        isStatus = 2
      } else {
        isStatus = 1
      }
      editEnable({ is_enable: isStatus, type: 1 }, data.id).then((res) => {
        this.$refs.table.refresh()
      })
    },
    handerEdit(id) {
      this.$router.push({
        name: 'infoCreate',
        query: {
          type: 'edit',
          tab: 4,
          id: id,
        },
      })
    },
    deleteItem(id) {
      let that = this
      this.$confirm({
        title: '删除热门课程',
        // content: '删除热门课程',
        onOk() {
          deleteList(id)
            .then((res) => {
              that.$refs.table.refresh()
              that.$message.success('删除成功')
            })
            .catch((err) => {
              that.$message.error(err.data.message || '删除失败')
            })
        },
        onCancel() {
          console.log('Cancel')
        },
        class: 'test',
      })
    },
    createInfo() {
      this.$router.push({
        name: 'infoCreate',
        query: {
          type: 'create',
          tab: 4,
          //   selRadio: 2,
        },
      })
    },
  },
}
</script>

<style>
</style>